
<script setup>
import { ref, defineProps, defineEmits } from "vue";
const tableMaxHeight = ref("calc(100vh - 450px)"); // 动态计算最大高度
const props = defineProps({
  showSelection: {
    type: Boolean,
    required: false,
  },
  showOperation: {
    type: Boolean,
    required: false,
  },
  currentPageData: {
    type: Object,
    required: true,
    default: () => ({
      data: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
    }),
  },
  columns: {
    type: Array,
    required: true,
  },
  data: {
    type: Array,
    required: true,
  },
  pageSize: {
    type: Number,
    default: 10,
  },
  currentPage: {
    type: Number,
    default: 1,
  },
  total: {
    type: Number,
    default: 1,
  },
});
// 修改表格斑马纹
const tableRowStyle = ({ row, rowIndex }) => {
  const style = {
    height: "45px", // 设置固定行高
    lineHeight: "20px", // 确保文字垂直居中
    color: "#fff", // 设置文字颜色为白色（深色背景需要浅色文字）
  };

  // 交替行背景色
  if (rowIndex % 2 === 0) {
    style.background = "#102e61";
  } else {
    style.background = "#123673";
  }

  return style;
};

const emit = defineEmits([
  "handleSelectionChange",
  "handleSizeChange",
  "handleCurrentChange",
]);
// 复选框选中
const handleSelectionChange = (rows) => {
  emit("handleSelectionChange", rows); // 触发事件并传递当前页码
};

const handleCurrentChange = (page) => {
  emit("handleCurrentChange", page); // 触发事件并传递当前页码
};
const handleSizeChange = (val) => {
  emit("handleSizeChange", val); // 触发事件并传递当前页码
};
</script>

<template>
  <div id="customTable">
    <el-table
      :data="currentPageData.data"
      :row-style="tableRowStyle"
      @selection-change="handleSelectionChange"
      :max-height="tableMaxHeight"
    >
      <el-table-column v-if="props.showSelection" type="selection" width="55" />
      <el-table-column
        v-for="column in columns"
        :key="column.prop"
        :prop="column.prop"
        :label="column.label"
        :width="column.width"
        align="center"
      >
      </el-table-column>
      <el-table-column
        v-if="showOperation"
        label="操作"
        width="250"
        align="center"
      >
        <template #default="scope">
          <slot name="operation" :row="scope.row"></slot>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      v-model:current-page="currentPageData.currentPage"
      v-model:page-size="currentPageData.pageSize"
      :total="currentPageData.total"
      :page-sizes="[10, 20, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<style lang="scss" scoped>
#customTable {
  display: flex;
  flex-direction: column;
  height: 100%; // 确保父级容器高度是明确的
}
</style>
